<template>
  <div class="header">
    <div class="logo">
      <!-- <router-link to="/find/"><img src="../assets/logo2.jpg"></router-link> -->
      <img src="../assets/logo2.jpg" alt @click="$router.push('/')" />
    </div>
    <div class="control">
      <div>
        <img @click="back" src="../assets/pre.png" />
        <img @click="$router.go(1)" src="../assets/next.png" />
      </div>
    </div>

    <Search></Search>

    <Person></Person>

    <div class="img">
      <img @click="a('min')" src="../assets/min.png" alt="" />
      <img @click="a('close')" src="../assets/close.png" alt="" />
    </div>
  </div>
</template>
<script>
import Search from "./search/search.vue";
import Person from "./person.vue";
import { mapState } from "vuex";
export default {
  components: {
    Search,
    Person,
  },
  methods: {
    back() {
      this.showsongdetail
        ? this.$store.commit("showsong")
        : this.$router.go(-1);
    },
    a(type) {
      if (window.require) {
        var remote = window.require("electron").remote;
      }
      if (window.require) {
        if (type == "min") {
          remote.getCurrentWindow().minimize();
        } else {
          remote.getCurrentWindow().close();
        }
      }
    },
  },
  computed: {
    ...mapState(["showsongdetail"]),
  },
};
</script>
<style lang="less">
.header {
  background: #c62f2f;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-app-region: drag;
  .logo {
    -webkit-app-region: none;
    width: 190px;
    img {
      margin: 10px auto;
    }
  }
  .control {
    width: 65px;
     -webkit-app-region: none;
    div {
      border: rgb(168, 40, 40) 2px solid;
      border-radius: 2px;
      width: 52px;
      display: flex;
      justify-content: center;
      img {
        height: 20px;
        width: 24px;
        cursor: pointer;
        &:first-child {
          border-right: rgb(168, 40, 40) 2px solid;
        }
      }
    }
  }
  .img {
    position: relative;
    left: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-app-region: none;
    img {
      margin: 5px 10px;
      width: 20px;
    }
  }
}
</style>
